<!--  radio 单选 - 属性面板 -->
<template>
  <div class="radioAttr">
    <div class="content">
      <div class="title">
        {{ attributeset.lab }}
      </div>
      <div v-if="attributeset.data" class="list">
        <div class="lab">字段标题：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.title"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="lab">占位文案：<span>最多30个字</span></div>
        <div>
          <t-input
            v-model="attributeset.data.placeholder"
            type="text"
            size="small"
            :maxlength="30"
            placeholder="请输入"
          />
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">表单宽度：</div>
          <div class="slider">
            <t-slider v-model="attributeset.data.width" size="small" />
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">显示标题</div>
          <div><t-switch v-model="attributeset.data.isShowTitle" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">隐藏组件</div>
          <div><t-switch v-model="attributeset.data.isShow" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">是否必填</div>
          <div><t-switch v-model="attributeset.data.isMust" /></div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">排列方式</div>
          <div>
            <t-radio-group
              v-model="attributeset.data.direction"
              default-value="1"
              size="small"
            >
              <t-radio-button value="row">横向</t-radio-button>
              <t-radio-button value="column">纵向</t-radio-button>
            </t-radio-group>
          </div>
        </div>
        <div class="fx-sb fx-al-ct">
          <div class="lab">默认值</div>
          <div>
            <t-select
              v-model="attributeset.data.defaultValue"
              placeholder="请输入默认值"
            >
              <t-option
                v-for="item in defaultValueOptions"
                :key="item"
                :label="item"
                :value="item"
              />
            </t-select>
          </div>
        </div>
        <div class="lab">选项：<span>最多200项，每项最多50字</span></div>
        <div class="radioOptions fx-ct">
          <span
            class="bt"
            :class="{ 'bt-grey': attributeset.data.dataType !== 'static' }"
            @click="dataTypeChange('static')"
            >静态数据</span
          >
          <span
            class="bt"
            :class="{ 'bt-grey': attributeset.data.dataType !== 'dynamic' }"
            @click="dataTypeChange('dynamic')"
            >动态数据</span
          >
        </div>
        <div v-show="attributeset.data.dataType == 'static'">
          <div ref="opScroll" class="optionsCont">
            <div
              v-for="(item, ind) in attributeset.data.titlab"
              :key="ind"
              class="labTitBox fx"
            >
              <t-input
                type="text"
                :value="item"
                size="small"
                placeholder="请输入选项名"
                @input="(event) => labTitChang(event, ind)"
              />
              <span class="sub" @click="labTitChang('sub', ind)"> - </span>
            </div>
          </div>
          <div class="actionRdOpt">
            <span @click="bulkEdit()">批量编辑</span>
            <span @click="labTitChang('add', attributeset.data.titlab.length)">
              添加选项
            </span>
            <!-- <span>添加其他</span>
            <span>关联控件</span> -->
          </div>
        </div>
        <div
          v-show="attributeset.data.dataType == 'dynamic'"
          class="dynamicSet"
        >
          <t-input-adornment prepend="接口请求地址：">
            <t-input placeholder="请输入地址" />
          </t-input-adornment>
          <t-input-adornment prepend="请求方式：">
            <t-input placeholder="请求方式" />
          </t-input-adornment>
          <t-input-adornment prepend="key：">
            <t-input placeholder="请输入请求key" />
          </t-input-adornment>
          <t-input-adornment prepend="value：">
            <t-input placeholder="请输入参数值" />
          </t-input-adornment>
        </div>
      </div>
    </div>
    <t-dialog
      v-model:visible="visible"
      header="批量编辑选项"
      width="70%"
      @confirm="editConfirm"
    >
      <t-textarea
        v-model="editOptions"
        :autosize="{ minRows: 10, maxRows: 20 }"
        placeholder="请输入选项并换行"
      />
    </t-dialog>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, watch } from 'vue'
import { SEARCH_TYPE } from '@/constants'

const props = defineProps({
  arrtData: Object
})

let attributeset = reactive({ ...props.arrtData })

// 数据类型选择
const dataTypeChange = (val) => {
  attributeset.data.dataType = val
}

// 接收父级的方法
const emit: Function = defineEmits(['changeAttrHandle'])
const opScroll = ref()
// 选项操作包括增、删、改
const labTitChang = (st, ind) => {
  if (typeof st === 'string' && st === 'add') {
    attributeset.data.titlab.push(`选项${attributeset.data.titlab.length + 1}`)
    scrollBottom()
  } else if (typeof st === 'string' && st === 'sub') {
    attributeset.data.titlab.splice(ind, 1)
  } else {
    if (st.data && st.inputType === 'insertText') {
      attributeset.data.titlab[
        ind
      ] = `${attributeset.data.titlab[ind]}${st.data}`
    } else if (st.inputType === 'deleteContentBackward') {
      // 这里留个坑吧 无法选中直接全删只能一个一个删 影响没那么大解决比较耗时
      attributeset.data.titlab[ind] = attributeset.data.titlab[ind].slice(0, -1)
    } else if (st.inputType === 'insertCompositionText') {
      attributeset.data.titlab[ind] = st.target.value
    }
  }
}
// 批量编辑
const visible = ref(false)
const editOptions = ref('')
const bulkEdit = () => {
  visible.value = true
  editOptions.value = ''
  const { titlab } = attributeset.data
  titlab.forEach((el, i) => {
    editOptions.value += titlab.length - 1 === i ? el : `${el}\n`
  })
}
// 批量编辑 - 确定
const editConfirm = () => {
  const data = editOptions.value
    .split('\n')
    .map((n, i) => (n === '' ? `选项${i}` : n))
  attributeset.data.titlab = data
  visible.value = false
  scrollBottom()
}
const scrollBottom = () => {
  opScroll.value.scrollTo({
    top: opScroll.value.scrollHeight,
    behavior: 'smooth'
  })
}
// 处理默认值和选项配置的同步下拉问题
const defaultValueOptions = ref(attributeset.data.titlab)
watch(
  () => props.arrtData.data.titlab,
  (val) => {
    defaultValueOptions.value = val
  },
  { deep: true }
)
// 同步调整attributeset
watch(
  () => props.arrtData,
  (val) => {
    attributeset = { ...val }
  },
  { deep: true }
)
// 监听整个表单的输入
watch(
  () => attributeset,
  (val) => {
    emit('changeAttrHandle', val)
  },
  { deep: true }
)
</script>
<style src="../../index.less" scoped></style>
